<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>我的点评</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../mui/css/mui.picker.min.css" rel="stylesheet" />
		<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<style>
			.mui-content {
				margin-bottom: 3.3rem;
			}
			
			.comment-select {
				height: 1.8rem;
				line-height: 1.8rem;
				margin: 0.9rem 0.6rem;
				background-color: #fff;
				display: flex;
				flex-direction: row;
				border: 1px solid #ff0066;
				border-radius: 0.25rem;
			}
			
			.comment-select div {
				width: 50%;
				text-align: center;
			}
			
			.comment-select div.active {
				color: #fff;
				background-color: #ff0066;
			}
						
			.hidden {
				display: none;
			}
			
			.hotel-list {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0.5rem 0.6rem;
			}
			
			.hotel-list-img {
				font-size: 0;
				margin-right: 0.9rem;
			}
			
			.hotel-list-img img {
				width: 80px;
			}
			
			.hotel-list-info {
				display: flex;
				flex-direction: column;
				flex: 2;
			}
			
			.info-title {
				font-size: 0.7rem;
				color: #333;
			}
			
			.share {
				font-size: 0.7rem;
				color: #666;
			}
			
			.info-date {
				font-size: 0.6rem;
				color: #999;
			}
			
			.info-wifi {
				display: flex;
				flex-direction: row;
				align-content: center;
				justify-content: space-between;
				width: 68%;
				font-size: 0.7rem;
				color: #999;
			}
			
			.info-wifi a {
				color: #666;
			}

			.dot img {
				width: 0.6rem;
			}
			
			.mui-table-view:before {
				top: -0.05rem;
			}
			
			.mui-table-view-cell:after {
				left: 0;
			}
			
			.hotel-fixed-area {
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
			
			.hotel-fixed-area img {
				width: 50%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.back();"></a>
			<h1 class="mui-title">我的点评</h1>
		</header>

		<div class="mui-content">
			<div class="comment-select">
				<div>待点评</div>
				<div class="active">已点评</div>
			</div>
			<div class="comment-container">
				<div class="comment-content comment-true">
					<ul class="mui-table-view mui-content-body">
						<li class="mui-table-view-cell hotel-list">
							<div class="hotel-list-img">
								<img src="../styles/images/avatar-icon1.png" />
							</div>
							<div class="hotel-list-info">
								<span class="info-title">金广快捷（深圳会展酒店）</span>
								<div>
									<span class="info-wifi">
										<span>4.5分</span>
										<a href="javascript:;">100条评论</a>
									</span>
								</div>
								<span class="share">感谢您的点评！</span>
								<div>
									<span class="info-date">
										<span>2017-03-21</span>
										<span>16:58:33</span>
									</span>
								</div>
							</div>
							<div class="hotel-fixed-area">
								<img src="../styles/images/go-icon.png" />
							</div>
						</li>
						<li class="mui-table-view-cell hotel-list">
							<div class="hotel-list-img">
								<img src="../styles/images/avatar-icon1.png" />
							</div>
							<div class="hotel-list-info">
								<span class="info-title">金广快捷（深圳会展酒店）</span>
								<div>
									<span class="info-wifi">
										<span>4.5分</span>
										<a href="javascript:;">100条评论</a>
									</span>
								</div>
								<span class="share">感谢您的点评！</span>
								<div>
									<span class="info-date">
										<span>2017-03-21</span>
										<span>16:58:33</span>
									</span>
								</div>
							</div>
							<div class="hotel-fixed-area">
								<img src="../styles/images/go-icon.png" />
							</div>
						</li>
						<li class="mui-table-view-cell hotel-list">
							<div class="hotel-list-img">
								<img src="../styles/images/avatar-icon1.png" />
							</div>
							<div class="hotel-list-info">
								<span class="info-title">金广快捷（深圳会展酒店）</span>
								<div>
									<span class="info-wifi">
										<span>4.5分</span>
										<a href="javascript:;">100条评论</a>
									</span>
								</div>
								<span class="share">感谢您的点评！</span>
								<div>
									<span class="info-date">
										<span>2017-03-21</span>
										<span>16:58:33</span>
									</span>
								</div>
							</div>
							<div class="hotel-fixed-area">
								<img src="../styles/images/go-icon.png" />
							</div>
						</li>
					</ul>
				</div>
				<div class="comment-content comment-false ">
					<ul class="mui-table-view mui-content-body">
						<li class="mui-table-view-cell hotel-list">
							<div class="hotel-list-img dot">
								<img src="../styles/images/dot1.png" />
							</div>
							<div class="hotel-list-info">
								<span class="info-title">您于2017-03-21 18：20入驻 深圳华侨城洲际大酒店！</span>
								<span class="share">分享入住体验，赚取积分吧！</span>
								<div>
									<span class="info-date">
										<span>2017-03-21</span>
										<span>16:58:33</span>
									</span>
								</div>
							</div>
							<div class="hotel-fixed-area">
								<img src="../styles/images/go-icon.png" />
							</div>
						</li>
						<li class="mui-table-view-cell hotel-list">
							<div class="hotel-list-img dot">
								<img src="../styles/images/dot1.png" />
							</div>
							<div class="hotel-list-info">
								<span class="info-title">您于2017-03-21 18：20入驻 深圳华侨城洲际大酒店！</span>
								<span class="share">分享入住体验，赚取积分吧！</span>
								<div>
									<span class="info-date">
										<span>2017-03-21</span>
										<span>16:58:33</span>
									</span>
								</div>
							</div>
							<div class="hotel-fixed-area">
								<img src="../styles/images/go-icon.png" />
							</div>
						</li>
						<li class="mui-table-view-cell hotel-list">
							<div class="hotel-list-img dot">
								<img src="../styles/images/dot1.png" />
							</div>
							<div class="hotel-list-info">
								<span class="info-title">您于2017-03-21 18：20入驻 深圳华侨城洲际大酒店！</span>
								<span class="share">分享入住体验，赚取积分吧！</span>
								<div>
									<span class="info-date">
										<span>2017-03-21</span>
										<span>16:58:33</span>
									</span>
								</div>
							</div>
							<div class="hotel-fixed-area">
								<img src="../styles/images/go-icon.png" />
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init();
		</script>

</html>